<template>
  <div class="homepage">
    <!--  banner  -->
    <div class="banner">
      <!--轮播图-->
      <div class="slideshow">
        <el-carousel :interval="5000" arrow="always" height="550px">
          <el-carousel-item v-for="item in images" :key="item.id">
            <el-image
                style="width: 100%;"
                :src="item.url"
                fit=fill>
            </el-image>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>

    <!--  公告栏和招标栏区域  -->
    <div class="one-list">
      <!--  公告栏  -->
      <div class="bulletin">
        <div class="articleList">
          <h3 class="title">
            <div><img :src="bulletinDate.imgPath" alt="">{{ bulletinDate.title }}</div>
            <div class="more" @click="toMoreInformation">More+</div>
          </h3>
          <ul>
            <li v-for="item in bulletinDate.data" >
              <a @click="toNoticeParticulars(item.noticeId)" :style="{width:bulletinDate.width}">{{ item.noticeTitle }}</a>
              <span>{{shortTime (item.annceTime )}}</span>
            </li>
          </ul>
        </div>
      </div>
      <!--    招标栏    -->
      <div class="tenderee">
        <div class="articleList">
          <h3 class="title">
            <div><img :src="tendereeDate.imgPath" alt="">{{ tendereeDate.title }}</div>
            <div class="more" @click="toMoreInformation">More+</div>
          </h3>
          <ul>
            <li v-for="item in tendereeDate.data" >
              <a @click="toBinddingParticulars(item.tenderId)" :style="{width:tendereeDate.width}">{{ item.tenderTitle }}</a>
              <span>{{shortTime(item.tenderTime)  }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!--  志愿者栏和活动栏区域  -->
    <div class="two-list">
      <!--    活动栏    -->
      <div class="activity">
        <div class="articleList">
          <h3 class="title">
            <div><img :src="activityDate.imgPath" alt="">{{ activityDate.title }}</div>
            <div class="more" @click="toMoreInformation">More+</div>
          </h3>
          <ul>
            <li v-for="item in activityDate.data" >
              <a @click="toActivityParticulars(item.activityId)" :style="{width:activityDate.width}">{{ item.activityTitle }}</a>
              <span>{{ shortTime (item.activityReleasetime) }}</span>
            </li>
          </ul>
        </div>
      </div>

      <!--    志愿者栏    -->
      <div class="volunteer">
        <div class="articleList">
          <h3 class="title">
            <div><img :src="volunteerDate.imgPath" alt="">{{ volunteerDate.title }}</div>
            <div class="more" @click="toMoreInformation">More+</div>
          </h3>
          <ul>
            <li v-for="item in volunteerDate.data" >
              <a @click="toVolunteerParticulars(item.activityId)" :style="{width:volunteerDate.width}">{{ item.activityTitle }}</a>
              <span>{{ shortTime (item.activityReleasetime) }}</span>
            </li>
          </ul>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import {getEverydayActivityByPage, getNoticeByPage, getTenderByPage, getVolunteerActivityByPage} from "@/api/allApi";
import {shortTime} from "../../../utils/timeFormat";
export default {
  name: "homepage",
  data() {
    return {
      /*轮播图*/
      images: [
        {
          id: 0,
          url: 'https://cdn.staticaly.com/gh/cf-01/image-hosting@master/images/2.3mr6pyt2d9u0.webp'
        },
        {
          id: 1,
          url: 'https://cdn.staticaly.com/gh/cf-01/image-hosting@master/images/1.5cn8abqlwgk0.webp'
        },
      ],
      tendereeDate:{
        title:'招标栏',
        width:'75%',
        imgPath:'https://cdn.staticaly.com/gh/cf-01/image-hosting@master/images/tenderee.2rf31lu50ty0.webp',
        data:[]
      },
      activityDate:{
        title:'活动栏',
        width:'83%',
        imgPath:'https://cdn.staticaly.com/gh/cf-01/image-hosting@master/images/activity.3ygm1xso14e0.webp',
        data:[]
      },
      volunteerDate:{
        title:'志愿者栏',
        width:'70%',
        imgPath:'https://cdn.staticaly.com/gh/cf-01/image-hosting@master/images/volunteer.7jlzft5zilk0.webp',
        data: []
      },
      bulletinDate:{
        title:'公告栏',
        width:'80%',
        imgPath:'https://cdn.staticaly.com/gh/cf-01/image-hosting@master/images/bulletin.3tjo7xrfojo0.webp',
        data:[]
      },
    }
  },
  methods: {
    shortTime,
    toMoreInformation() {
      this.$router.push({
        path: "/userLayout/moreInformation",
      });
    },
    getTenderByPage() {
      getTenderByPage({
        current:1,
        pageSize:9
      }).then(res=>{
        this.tendereeDate.data = res.data.data
      })
    },
    getEverydayActivityByPage() {
      getEverydayActivityByPage({
        current:1,
        pageSize:9
      }).then(res=>{
        this.activityDate.data = res.data.data
      })
    },
    getVolunteerActivityByPage() {
      getVolunteerActivityByPage({
        current:1,
        pageSize:9
      }).then(res=>{
        this.volunteerDate.data = res.data.data
      })
    },
    getNoticeByPage(){
      getNoticeByPage({
        current:1,
        pageSize:9
      }).then(res=>{
        this.bulletinDate.data = res.data.data
      })
    },
    toNoticeParticulars(noticeId) {
      this.$router.push({
        path: "/userLayout/noticeParticulars/"+noticeId,
      });
    },
    toBinddingParticulars(tenderId) {
      this.$router.push({
        path: "/userLayout/binddingParticulars/"+tenderId,
      });
    },
    toVolunteerParticulars(volunteerId) {
      this.$router.push({
        path: "/userLayout/volunteerParticulars/"+volunteerId,
      });
    },
    toActivityParticulars(activityId) {
      this.$router.push({
        path: "/userLayout/activityParticulars/"+activityId,
      });
    },
  },
  mounted() {
    this.getNoticeByPage()
    this.getTenderByPage()
    this.getEverydayActivityByPage()
    this.getVolunteerActivityByPage()
  }

}
</script>

<style lang="less" scoped>
.homepage {
  display: flex;
  padding: 30px 0;
  margin: auto;
  min-width: 900px;
  width: 80%;
  flex-wrap: wrap;

  .banner {
    display: flex;
    width: 100%;
    justify-content: space-between;

    margin-bottom: 30px;
    .slideshow {
      min-width: 700px;
      width: 100%;
    }
  }

  .one-list {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 430px;
    margin-bottom: 30px;
    font-size: 16px;
    .bulletin {
      width: 55%;
    }

    .tenderee {
      width: 42%;
    }
  }



  .two-list {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 430px;
    font-size: 16px;

    .volunteer {
      width: 42%;
    }

    .activity {
      width: 55%;
    }
  }

  .bulletin,.tenderee,.volunteer,.activity {
    padding: 30px;
    background-color: #fff;
    border-radius: 5px;
  }

}

.form-width {
  width: 70%;
}


.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 600px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

h3 {
  display: flex;
  align-items: center;
  font-size: 25px;
  font-weight: 500;
  font-family: 黑体;
  color: rgb(64, 158, 255);
  justify-content: space-between;

  div {
    display: flex;
    align-items: center;

    img {
      width: 20px;
      margin-right: 10px;
    }
  }

  .more {
    font-size: 16px;
    align-items: flex-start;
    cursor: pointer;
    color: #666;
  }

  .more:hover {
    color: rgb(64, 158, 255);
  }
}

ul {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;

  li {
    display: flex;
    width: 100%;
    justify-content: space-between;
    line-height: 37px;

    a {
      width: 75%;
      overflow: hidden; //（文字长度超出限定宽度，则隐藏超出的内容）
      white-space: nowrap; //（设置文字在一行显示，不能换行）
      text-overflow: ellipsis; //（规定当文本溢出时，显示省略符号来代表被修剪的文本）
      color: #1c1c1c;
      transition-duration: 0.3s;
    }

    a:hover {
      padding-left: 5px;
    }

    span {
      flex-shrink: 0;
      width: 94px;
      color: #b5b4b3;
    }
  }
}

</style>